<template>
    <div>
        <Top></Top>
     
        <Header></Header>
  
        <el-row>
            <el-col :span="16" :offset="4">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <!-- 图片 -->
                     <img :src="product.pic" alt="" style="width: 260px;height: 260px;margin-top: 20px;">
                    </el-col>
                    <el-col :span="16" style="text-align: left;"> 
                        <!-- 信息及备注 -->
                       <p><b style="font-size: 32px;">{{product.name}}</b></p>
                       <p style="font-size: 18px; line-height:2;color:#303133;font-family:Hiragino Sans GB;margin-top:20px"><span>价 格：</span>{{  product.salePrice}}/{{product.uname}}</p>
                        <p style="font-size: 18px; line-height:2;color:#303133;font-family:Hiragino Sans GB"><span>类 型：</span><el-tag> {{  product.type}}</el-tag></p>
                        <p style="font-size: 18px; line-height:2;color:#303133;font-family:Hiragino Sans GB"><span>库 存：</span>{{product.stock}}{{product.uname}}</p> 
                        <p style="font-size: 18px; line-height:2;color:#303133;font-family:Hiragino Sans GB"><span>供应商：</span>{{product.supplier}}</p> 

                       <p style="font-size: 18px; line-height:2;color:#303133;font-family:Hiragino Sans GB">购买数量： <el-input-number v-model="num"  :min="1" :max="2000" label="购买数量"></el-input-number></p> 
                        <el-row >
                            <el-button type="danger" style="margin-top: 20px;">立即购买</el-button>
                            <el-button type="success" @click="add">加入购物车</el-button>
                        </el-row>


                    </el-col> 

                </el-row> 

            </el-col>
        </el-row>
        
        <Footer></Footer>


    </div>
</template>

<script>
import Cookie from '../../util/cookie'
import Footer from '../commons/Footer.vue'
import Header from '../commons/Header.vue'
import Top from '../commons/Top.vue'
export default{
    data(){
        return{
            num:1,
            pid:this.$route.params.pid,
            product:{},

            user:JSON.parse(localStorage.getItem("user"))

        }
    },
    components:{
        Top,Header,Footer
    },
    mounted(){
        //页面渲染
        this.$axios.get("/product/getById/"+this.pid).then(respData=>{
            console.log(respData)
            this.product = respData.data.data;
        });

    },
   methods:{
    //加购操作
    add(){
        //如果cookie中存在authorization，说明已经登录过了，服务器已颁发过令牌
        if(Cookie.getCookie("authorization")){
            console.log("发请求")
            this.$axios.post("/cart/add",{
                goodsid:this.pid,
                num:this.num,
                //此时是加购操作，对支付时没有太大影响，故可从前端传数据
                saleprice:this.product.salePrice,
                type:this.product.type
            }).then(respData=>{
                console.log(respData)
                if(respData.data.data){
                    this.$message({
                        message:"加购成功！",
                        type:"success"
                    })
                }
            });

        }else{
            console.log("去登录")
            this.$router.push("/login")
        }
    
        

    },
  
   }

}
</script>


<style scoped>

</style>